<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=0">  
    <title>just for you</title>
    <link rel="stylesheet" href="./mystyle.css">
</head>

<body>
    <audio src="./遇见.mp3" controls="controls" autoplay="autoplay"></audio>
    <div id="bg">
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div class="stars"></div>
        <div id="water">
            <div class="starUnder"></div>
            <div class="starUnder"></div>
            <div class="starUnder"></div>
            <div class="starUnder"></div>
            <div class="starUnder"></div>
            <div class="starUnder"></div>
            <div class="starUnder"></div>
            <div class="starUnder"></div>
            <div class="starUnder"></div>
            <div class="starUnder"></div>
            <div class="starUnder"></div>
            <div class="starUnder"></div>
            <div class="starUnder"></div>
            <div class="starUnder"></div>
            <div class="starUnder"></div>
            <div class="starUnder"></div>
            <div class="starUnder"></div>
            <div class="starUnder"></div>
            <div class="starUnder"></div>
            <div class="starUnder"></div>
            <div class="starUnder"></div>
            <div class="starUnder"></div>
            <div class="starUnder"></div>
            <div class="starUnder"></div>
            <div class="starUnder"></div>
            <div class="starUnder"></div>
            <div class="starUnder"></div>
            <div class="starUnder"></div>
            <div class="starUnder"></div>
            <div class="starUnder"></div>
            <div class="starUnder"></div>
            <div class="starUnder"></div>
            <div class="starUnder"></div>
            <div class="starUnder"></div>
            <div class="starUnder"></div>
            <div class="starUnder"></div>
            <div class="starUnder"></div>
            <div class="starUnder"></div>
            <div class="starUnder"></div>
            <div class="starUnder"></div>
        </div>
        <div id="moon">
        </div>
    </div>

    <script>
        window.onload = function () {
            //音频自动播放
            var audio = document.querySelector('audio');
            var arrWid = [0, 80, 320]; //影子渐变
            var arrHgt = [0, 10, 200];
            var posTop = [0, 2, 13, 46];
            var spdWid = 16;
            var spdHgt = 10;
            var num = 7.5;
            var poem1 = ['但', '愿', '人', '长', '久'];
            var poem2 = ['千', '里', '共', '婵', '娟'];
            var bgc = document.querySelector('#bg');
            var moon = document.getElementById("moon");
            var water = document.getElementById("water");
            var Ocean = document.getElementsByClassName("Ocean");
            moon.style.top = 400 + "px";
            var timer = setInterval(function () {
                moon.style.top = moon.offsetTop - 10 + "px";
                if (moon.offsetTop >= 660) {
                    shadow(arrWid[0], arrHgt[0], 0);
                } else if (moon.offsetTop >= 440) {
                    if (arrWid[1] >= 200 || arrHgt[1] >= 110) {
                        spdHgt = 7.5;
                        spdWid = 8;
                    }
                    arrWid[1] += spdWid;
                    arrHgt[1] += spdHgt;
                    shadow(arrWid[1], arrHgt[1], 0);
                } else if (moon.offsetTop >= 430) {
                    shadow(arrWid[2], arrHgt[2], 0);
                } else if (moon.offsetTop >= 420) {
                    posTop[0] += 2;
                    shadow(arrWid[2], arrHgt[2], posTop[0]);
                } else if (moon.offsetTop >= 410) {
                    posTop[1] += 11;
                    shadow(arrWid[2], arrHgt[2], posTop[1]);
                } else if (moon.offsetTop >= 240) {
                    posTop[2] += 2;
                    shadow(arrWid[2], arrHgt[2], posTop[2]);
                } else if (moon.offsetTop >= 140) {
                    posTop[3] += 0.4;
                    //月亮即将完全升起时开始改变它的大小（影）
                    arrWid[2] -= 4;
                    arrHgt[2] -= 1;
                    shadow(arrWid[2], arrHgt[2], posTop[3]);
                } else {
                    shadow(284, 190, 50);
                    clearInterval(timer);
                    var a = document.createElement("div");
                    a.className = "Ocean";
                    moon.appendChild(a);
                    moon.innerHTML += "<img id='girl' src='1.png'>";
                    var girl = document.getElementById("girl");
                    girl.style.animation = "appear 6s linear";
                    word(Ocean[0], 500, poem1);
                    var timeOut = setTimeout(function () {
                        var div = document.createElement("div");
                        div.className = "thisTime";
                        moon.appendChild(div);
                        var thisTime = document.getElementsByClassName("thisTime");
                        word(thisTime[0], 500, poem2);
                        clearTimeout(timeOut);
                    }, 2500);
                }
            }, 100)


            //修改影子
            function shadow(widSpd, hgtSpd, posTop) {
                return water.style.background = "radial-gradient(" + widSpd / num + "vw " + hgtSpd / num + "vw at 50.5% " + posTop + "%,rgb(250, 250, 249) 50%,rgb(247, 247, 245) 63%,rgb(7,7,70) 70%,rgb(18, 2, 56) 85%,rgb(13, 1, 59) 100%)";
            }


            createStar(40, ".stars", "star", 1, 300, 360, -100);
            createStar(40, ".starUnder", "star1", 1.5, 360, 300, 200);
            //造星星
            function createStar(starNum, element, element2, scal, deg, rotY, rotX) {
                var stars = document.querySelectorAll(element);
                var r = 2000;

                //实现1:先把元素存放于数组，在通过join方法将数组元素切割成字符串，再把它们写入指定位置
                var arr = [];
                for (var i = 0; i < starNum; i++) {
                    var star = '<div class=' + element2 + '></div>';
                    arr.push(star)
                }
                stars.forEach(item => {
                    item.innerHTML = arr.join('');
                })



                var bubble = document.querySelectorAll('.' + element2);
                bubble.forEach(item => {
                    var s = 0.2 + (Math.random() * scal);
                    var curR = r + (Math.random() * deg);
                    item.style.transformOrigin = "0 0 " + curR / num + "vw";
                    item.style.transform = " translate3d(0,0,-" + curR / num + "vw) rotateY(" + (Math.random() * rotY) + "deg) rotateX(" + (Math.random() * rotX) + "deg) rotateY(" + -10 + "deg) scale(" + s + "," + s + ")";

                })
            }

            //字
            function word(className, dur, array) {
                var i = 0;
                var timeName = setInterval(function () {
                    className.style.animation = "appear 4s linear";
                    var p = document.createElement("p");
                    p.innerHTML = array[i];
                    className.appendChild(p);
                    i++;
                    if (i >= array.length) {
                        clearInterval(timeName);
                    }
                }, dur);
            }


            var body=document.body;
            var html=document.documentElement;
            body.addEventListener("touchstart", function bf() {
                if (audio !== null) {

                    //检测播放是否已暂停.audio.paused 在播放器播放时返回false.

                    if (audio.paused) {

                        audio.play(); 

                    }

                }

            })

            html.addEventListener('touchstart', function () {
                audio.play();
            })


        }
    </script>
</body>

</html>